<template>
  <div class="toggle-hook-demo p-4">
    <div class="space-y-6">
      <!-- 基础切换 -->
      <div class="toggle-section">
        <h4 class="toggle-title">基础布尔值切换</h4>
        <div class="space-y-3">
          <div class="toggle-display">
            <div
              class="toggle-status"
              :class="basicToggle.state.value ? 'status-on' : 'status-off'"
            >
              <div class="status-icon">
                {{ basicToggle.state.value ? '🟢' : '🔴' }}
              </div>
              <div class="status-text">
                {{ basicToggle.state.value ? 'ON' : 'OFF' }}
              </div>
            </div>
          </div>

          <div class="toggle-controls">
            <button @click="basicToggle.toggle()" class="btn-toggle">
              {{ basicToggle.state.value ? '关闭' : '开启' }}
            </button>
            <button
              @click="basicToggle.setTrue()"
              :disabled="basicToggle.state.value"
              class="btn-on"
            >
              设为 ON
            </button>
            <button
              @click="basicToggle.setFalse()"
              :disabled="!basicToggle.state.value"
              class="btn-off"
            >
              设为 OFF
            </button>
          </div>
        </div>
      </div>

      <!-- 多个切换开关 -->
      <div class="toggle-section">
        <h4 class="toggle-title">多个独立开关</h4>
        <div class="space-y-3">
          <div class="switches-grid">
            <div class="switch-item">
              <label class="switch-label">通知</label>
              <div
                class="switch-toggle"
                :class="{ active: notificationToggle.state.value }"
                @click="notificationToggle.toggle()"
              >
                <div class="switch-handle"></div>
              </div>
            </div>

            <div class="switch-item">
              <label class="switch-label">深色模式</label>
              <div
                class="switch-toggle"
                :class="{ active: darkModeToggle.state.value }"
                @click="darkModeToggle.toggle()"
              >
                <div class="switch-handle"></div>
              </div>
            </div>

            <div class="switch-item">
              <label class="switch-label">自动保存</label>
              <div
                class="switch-toggle"
                :class="{ active: autoSaveToggle.state.value }"
                @click="autoSaveToggle.toggle()"
              >
                <div class="switch-handle"></div>
              </div>
            </div>

            <div class="switch-item">
              <label class="switch-label">声音效果</label>
              <div
                class="switch-toggle"
                :class="{ active: soundToggle.state.value }"
                @click="soundToggle.toggle()"
              >
                <div class="switch-handle"></div>
              </div>
            </div>
          </div>

          <div class="settings-summary">
            <div class="summary-title">当前设置：</div>
            <div class="settings-list">
              <div class="setting-item" :class="{ enabled: notificationToggle.state.value }">
                通知：{{ notificationToggle.state.value ? '开启' : '关闭' }}
              </div>
              <div class="setting-item" :class="{ enabled: darkModeToggle.state.value }">
                深色模式：{{ darkModeToggle.state.value ? '开启' : '关闭' }}
              </div>
              <div class="setting-item" :class="{ enabled: autoSaveToggle.state.value }">
                自动保存：{{ autoSaveToggle.state.value ? '开启' : '关闭' }}
              </div>
              <div class="setting-item" :class="{ enabled: soundToggle.state.value }">
                声音效果：{{ soundToggle.state.value ? '开启' : '关闭' }}
              </div>
            </div>
          </div>

          <div class="batch-controls">
            <button @click="enableAll" class="btn-batch btn-enable">全部开启</button>
            <button @click="disableAll" class="btn-batch btn-disable">全部关闭</button>
            <button @click="resetAll" class="btn-batch btn-reset">重置默认</button>
          </div>
        </div>
      </div>

      <!-- 条件渲染演示 -->
      <div class="toggle-section">
        <h4 class="toggle-title">条件渲染演示</h4>
        <div class="space-y-3">
          <div class="render-controls">
            <button @click="showCard.toggle()" class="btn-toggle">
              {{ showCard.state.value ? '隐藏卡片' : '显示卡片' }}
            </button>
            <button @click="showDetails.toggle()" class="btn-toggle">
              {{ showDetails.state.value ? '隐藏详情' : '显示详情' }}
            </button>
            <button @click="showList.toggle()" class="btn-toggle">
              {{ showList.state.value ? '隐藏列表' : '显示列表' }}
            </button>
          </div>

          <div class="render-area">
            <transition name="fade">
              <div v-if="showCard.state.value" class="demo-card">
                <h5 class="card-title">演示卡片</h5>
                <p class="card-content">这是一个通过 useToggle 控制显示的卡片组件</p>

                <transition name="slide">
                  <div v-if="showDetails.state.value" class="card-details">
                    <h6 class="details-title">详细信息</h6>
                    <ul class="details-list">
                      <li>创建时间：{{ new Date().toLocaleString() }}</li>
                      <li>状态：活跃</li>
                      <li>类型：演示组件</li>
                    </ul>
                  </div>
                </transition>

                <transition name="slide">
                  <div v-if="showList.state.value" class="card-list">
                    <h6 class="list-title">功能列表</h6>
                    <div class="feature-list">
                      <div class="feature-item">✅ 响应式状态管理</div>
                      <div class="feature-item">✅ 平滑过渡动画</div>
                      <div class="feature-item">✅ 条件渲染控制</div>
                      <div class="feature-item">✅ 组合式 API</div>
                    </div>
                  </div>
                </transition>
              </div>
            </transition>
          </div>
        </div>
      </div>
    </div>

    <!-- Hook 说明 -->
    <div class="mt-6 p-4 bg-green-50 border border-green-200 rounded">
      <h5 class="text-sm font-medium text-green-800 mb-2">🔄 useToggle Hook 特性</h5>
      <ul class="text-xs text-green-700 space-y-1">
        <li>• <strong>简单易用</strong>: 封装常用的布尔值切换逻辑</li>
        <li>• <strong>灵活控制</strong>: 提供 toggle、setTrue、setFalse 方法</li>
        <li>• <strong>类型安全</strong>: TypeScript 类型支持</li>
        <li>• <strong>响应式</strong>: 状态变化自动更新 UI</li>
        <li>• <strong>场景丰富</strong>: 适用于开关、显示隐藏、模态框等场景</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useToggle } from '@/hooks/useToggle'

// 基础切换
const basicToggle = useToggle(false)

// 多个独立开关
const notificationToggle = useToggle(true)
const darkModeToggle = useToggle(false)
const autoSaveToggle = useToggle(true)
const soundToggle = useToggle(false)

// 批量控制
const enableAll = () => {
  notificationToggle.setTrue()
  darkModeToggle.setTrue()
  autoSaveToggle.setTrue()
  soundToggle.setTrue()
}

const disableAll = () => {
  notificationToggle.setFalse()
  darkModeToggle.setFalse()
  autoSaveToggle.setFalse()
  soundToggle.setFalse()
}

const resetAll = () => {
  notificationToggle.setTrue()
  darkModeToggle.setFalse()
  autoSaveToggle.setTrue()
  soundToggle.setFalse()
}

// 条件渲染演示
const showCard = useToggle(true)
const showDetails = useToggle(false)
const showList = useToggle(false)
</script>

<style scoped lang="scss">
.toggle-hook-demo {
  @apply bg-gray-50;
}

.toggle-section {
  @apply p-4 bg-white rounded-lg border border-gray-200;
}

.toggle-title {
  @apply text-base font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200;
}

.toggle-display {
  @apply flex justify-center;
}

.toggle-status {
  @apply p-6 rounded-lg border-2 transition-all duration-300;

  &.status-on {
    @apply bg-green-100 border-green-300;
  }

  &.status-off {
    @apply bg-red-100 border-red-300;
  }
}

.status-icon {
  @apply text-4xl text-center mb-2;
}

.status-text {
  @apply text-xl font-bold text-center;
}

.toggle-controls {
  @apply flex justify-center space-x-3;
}

.btn-toggle,
.btn-on,
.btn-off,
.btn-batch {
  @apply px-4 py-2 rounded font-medium transition-colors;
}

.btn-toggle {
  @apply bg-blue-500 text-white hover:bg-blue-600;
}

.btn-on {
  @apply bg-green-500 text-white hover:bg-green-600 disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-off {
  @apply bg-red-500 text-white hover:bg-red-600 disabled:opacity-50 disabled:cursor-not-allowed;
}

.switches-grid {
  @apply grid grid-cols-2 gap-4;
}

.switch-item {
  @apply flex items-center justify-between p-3 bg-gray-50 rounded-lg;
}

.switch-label {
  @apply text-sm font-medium text-gray-700;
}

.switch-toggle {
  @apply w-12 h-6 bg-gray-300 rounded-full cursor-pointer transition-all duration-200 relative;

  &.active {
    @apply bg-blue-500;

    .switch-handle {
      @apply translate-x-6;
    }
  }
}

.switch-handle {
  @apply w-5 h-5 bg-white rounded-full shadow-md transition-transform duration-200 absolute top-0.5 left-0.5;
}

.settings-summary {
  @apply p-3 bg-gray-100 rounded-lg;
}

.summary-title {
  @apply text-sm font-medium text-gray-700 mb-2;
}

.settings-list {
  @apply space-y-1;
}

.setting-item {
  @apply text-sm text-gray-600;

  &.enabled {
    @apply text-green-600 font-medium;
  }
}

.batch-controls {
  @apply flex justify-center space-x-2;
}

.btn-enable {
  @apply bg-green-500 text-white hover:bg-green-600;
}

.btn-disable {
  @apply bg-red-500 text-white hover:bg-red-600;
}

.btn-reset {
  @apply bg-gray-500 text-white hover:bg-gray-600;
}

.render-controls {
  @apply flex flex-wrap gap-2 justify-center;
}

.render-area {
  @apply min-h-[200px];
}

.demo-card {
  @apply p-6 bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200 rounded-lg;
}

.card-title {
  @apply text-xl font-bold text-gray-800 mb-3;
}

.card-content {
  @apply text-gray-600 mb-4;
}

.card-details,
.card-list {
  @apply mt-4 p-4 bg-white rounded-lg border border-gray-200;
}

.details-title,
.list-title {
  @apply text-lg font-semibold text-gray-800 mb-3;
}

.details-list {
  @apply space-y-1 text-sm text-gray-600;
}

.feature-list {
  @apply space-y-2;
}

.feature-item {
  @apply text-sm text-green-600;
}

// Vue 过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter-from {
  opacity: 0;
  transform: translateY(-20px);
}

.slide-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>
